<template>
  <div class="xi-box">
    <van-nav-bar
      title="师徒关系"
      :border="false"
      left-text=""
      right-text="玩法介绍"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 选项卡切换效果 -->
    <div class="nav-swith">
      <div
        v-for="(item,index) in nav"
        :key="index"
        @click="chack(index)"
        :class="{active:ppnum === index}"
      >{{item.title}}</div>

    </div>
    <!-- 选项卡1内容 -->
    <div
      class="fs"
      v-show="ppnum === 1"
    >
      <p class="pp">当前没有师父，为你推荐以下用户
        <span>
          查看更多
          <van-icon name="arrow" />
        </span>
      </p>

      <div class="fs-list">
        <li>
          <div class="fs-img">
            <img width="100%" src="https://img2.baidu.com/it/u=943583932,477159841&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="">
          </div>
          <div class="fs-p">
            <h3>影子军团</h3>
            <p>
              <span>♀</span>
              <span class="p-te">一阶名师</span>
              <!-- <span></span> -->
            </p>
            <p >已收徒0人</p>
          </div>
          <div class="fs-btn">
            <p>当前在线</p>
            <div>拜师</div>
          </div>
        </li>
        <!--  -->
        <li>
          <div class="fs-img">
            <img width="100%" src="https://img2.baidu.com/it/u=3740253142,3798259836&fm=253&fmt=auto&app=138&f=PNG?w=360&h=360" alt="">
          </div>
          <div class="fs-p">
            <h3>影子军团</h3>
            <p>
                <span>♀</span>
              <span class="p-te">一阶名师</span>
            </p>
            <p>已收徒0人</p>
          </div>
          <div class="fs-btn">
            <p>当前在线</p>
            <div>拜师</div>
          </div>
        </li>
        <!--  -->
        <li>
          <div class="fs-img">
            <img width="100%" src="https://img1.baidu.com/it/u=1434227481,416662725&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="">
          </div>
          <div class="fs-p">
            <h3>影子军团</h3>
            <p>
                <span>♀</span>
              <span class="p-te">一阶名师</span>
            </p>
            <p>已收徒0人</p>
          </div>
          <div class="fs-btn">
            <p>当前在线</p>
            <div>拜师</div>
          </div>
        </li>
        <!--  -->
        <li>
          <div class="fs-img">
            <img width="100%" src="https://img2.baidu.com/it/u=35172404,2336340227&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="">
          </div>
          <div class="fs-p">
            <h3>影子军团</h3>
            <p>
                <span>♂</span>
              <span class="p-te">一阶名师</span>
            </p>
            <p>已收徒0人</p>
          </div>
          <div class="fs-btn">
            <p>当前在线</p>
            <div>拜师</div>
          </div>
        </li>
        <!--  -->
        <li>
          <div class="fs-img">
            <img width="100%" src="https://img0.baidu.com/it/u=93273282,829137782&fm=253&fmt=auto&app=120&f=JPEG?w=360&h=360" alt="">
          </div>
          <div class="fs-p">
            <h3>影子军团</h3>
            <p>
                <span>♀</span>
              <span class="p-te">一阶名师</span>
            </p>
            <p>已收徒0人</p>
          </div>
          <div class="fs-btn">
            <p>当前在线</p>
            <div>拜师</div>
          </div>
        </li>
        <!--  -->
        <li>
          <div class="fs-img">
            <img width="100%" src="https://img1.baidu.com/it/u=1813958126,1767335541&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="">
          </div>
          <div class="fs-p">
            <h3>影子军团</h3>
            <p>
                <span>♂</span>
              <span class="p-te">一阶名师</span>
            </p>
            <p>已收徒0人</p>
          </div>
          <div class="fs-btn">
            <p>当前在线</p>
            <div>拜师</div>
          </div>
        </li>
        <!--  -->
      </div>

    </div>
    <!-- 选项卡2内容 -->
    <div
      class="sd"
      v-show="ppnum === 0"
    >
      <!-- 修行者 -->
      <div class="sd-big">
        <div class="big-a">
          <div class="a-img">
            <img width="100%" src="https://img0.baidu.com/it/u=1837396883,3726253871&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
          </div>
          <div class="a-p">
            <h2>一方通行</h2>
            <p>查看名师奖励
              <van-icon
                name="arrow"
                dot
              />
            </p>
          </div>
        </div>
        <div class="big-b">
          <p>能力等级</p>
          <van-progress
            class="jin"
            :show-pivot="false"
            :percentage="80"
            track-color="#f2826a"
          />
          <p><span>Lv.5</span>/ <span>Lv.6</span></p>
        </div>
        <hr>
        <p class="etc">距离Lv.6还差5000只御坂妹</p>
      </div>
      <!-- 徒弟列表 -->
      <div class="tud">
        <div class="td-lis">
            <span>徒弟列表(0)</span>
            &nbsp;|&nbsp;
            <span>名师任务(0/4)</span>
            
        </div>
        <div class="td-big">
            <img width="100%" src="https://img2.baidu.com/it/u=2949559703,111204777&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=354" alt="">
        </div>
        <h3 class="hh">你当前还没有徒弟</h3>
        <p class="pp">晋升成为一阶名师即可收徒</p>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
//  接口太垃圾
import { getTea , getStu, getRuroom} from "@/services";
export default {
  data() {
    return {
      nav: [
        {
          title: "我的徒弟",
        },
        {
          title: "我的师傅",
        },
        ],
      list:[],
      ppnum: 0,
    };
  },
  methods: {
    chack(i) {
      this.ppnum = i;
    },
    onClickLeft() {
      //  Toast('返回');
      this.$router.push("find");
      // console.log(1);
    },
    onClickRight() {
      //   Toast('按钮');
    },
    },
    created() {
        getRuroom().then(res => {
        console.log(res.data);
        })
        /* getStu({tid:2}).then(res => {
            console.log(res.data);
            let arr = res.data
            this.list.push(arr)
        console.log(this.list);
    }) */
  },
};
</script>

<style lang="scss" >
.xi-box {
  color: #cecece;
  .van-nav-bar {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    background-color: #1a1a1a;
  }
  .van-nav-bar__content {
    height: 80px;
    //
  }
  .van-nav-bar__title {
    height: 80px;
    font-size: 40px;
    line-height: 80px;
    color: #9a9aa4;
  }
  .van-icon-arrow-left {
    font-size: 40px;
    color: #9a9aa4;
  }
  .van-nav-bar__right {
    font-size: 28px;
    color: #9a9aa4;
  }
  .nav-swith {
    width: 80%;
    height: 70px;
    margin: 50px auto;

    background-color: #efefef;
    border-radius: 40px;
    display: flex;
    div {
      flex: 1;
      color: black;
      text-align: center;
      font-size: 30px;
      line-height: 70px;
    }
    .active {
      border-radius: 40px;
      background-color: #bebebe;
    }
  }
  .fs {
    width: 90%;
    margin: 0 auto;
    .pp {
      font-size: 28px;
      height: 50px;
      line-height: 50px;
      margin: 20px 0;
      span {
        font-size: 24px;
        float: right;
        // line-height: ;
      }
    }
    .fs-list {
      width: 100%;
      li {
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
        .fs-img {
          width: 130px;
          height: 130px;
          border-radius: 50%;
          overflow: hidden;
        //   border-radius: 50%;
          background-color: #cecece;
        }
        .fs-p {
          width: 350px;
          height: 130px;
          color: black;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          h3 {
            font-weight: normal;
            font-size: 28px;
            color: white;
            
          }
          p {
            font-size: 24px;
            // background-color: #cecece;
            // margin: 10px 0;
            color: white;
            margin: 5px 0;
            width: 170px;
            display: flex;
            justify-content: space-between;
            span{
                color: #b05ab3;
            }
            .p-te{
                width: 130px;
                text-align: center;
                color: white;
                border-radius: 30px;
                background-color: #8b90ef;
            }
          }
        }
        .fs-btn {
          width: 120px;
          height: 130px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          p {
            font-size: 22px;
            text-align: center;
          }
          div {
            width: 100%;
            height: 60px;
            font-size: 28px;
            text-align: center;
            line-height: 60px;
            border-radius: 30px;
            color: white;
            background-color: #56bd92;
          }
        }
      }
    }
  }
  .sd {
    width: 90%;
    margin: 0 auto;
    color: black;
    .sd-big {
      width: 100%;
      height: 280px;
      background-color: #efefef;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .big-a {
        height: 52px;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .a-img {
          width: 52px;
          height: 52px;
          background-color: #cecece;
        }
        .a-p {
          width: 530px;
          display: flex;
          justify-content: space-between;
          h2 {
            font-size: 36px;
            line-height: 52px;
          }
          p {
            font-size: 24px;
            line-height: 52px;
          }
        }
      }
      .big-b {
        width: 90%;
        margin: 0 auto;
        height: 30px;
        display: flex;
        justify-content: space-between;
        .jin {
          width: 200px;
          height: 30px;
        }
        p {
          font-size: 24px;
        }
      }
      .etc {
        font-size: 28px;
        text-align: center;
      }
    }
    .tud{
        width: 100%;
        height: 800px;
        margin-top: 60px;
        background-color: #ffffff;
        color: black;
        .td-lis{
            padding-top: 30px;
            font-size: 28px;
           span{
            font-size: 28px;

           }
        }
        .td-big{
            width: 360px;
            height: 240px;
            margin: 0 auto;
            margin-top: 120px;
            background-color: #efefef;
        }
        .hh{
            font-size: 28px;
            text-align: center;
            font-weight: normal;
            margin-top: 50px;
        }
        .pp{
            font-size: 24px;
            text-align: center;
        }
    }
  }
}
</style>